<template>
    <div>
        User组件--{{count}}
         <br>
        <br>
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
        <br>
        username={{username}}
        <br>
        <br>
        <button @click="setUsername('lisi')">改变username</button>
        <br>
        <br>
        count={{count}}
        <br>
        <br>
         计算属性： {{reverseUsername}}
         <br>
         <br>
         <br>
         <router-link :to="{name:'userinfo',params:{id:123}}">跳转到用户详情</router-link>
         <br>
         <br>
         <button @click="this.$router.push({name:'userinfo',params:{id:678}})">js跳转到userinfo</button>
         <br>
         <br>
         <button @click="incCount">执行vuex里面的方法  改变count</button>
         <button @click="setCount">执行vuex里面的方法  设置count</button>
         <br>
         <br>
         获取getters里面的数据
         <br>
         {{reverseMsg}}
         <br>
         {{num}}
         <br>
         <br>
         <button @click="setMsg">改变state里面的数据</button>
         <br>
         <br>
         触发action里面的方法
         <br>
         <br>
         <button @click="$store.dispatch('incCount')">Action incCount</button>
         <br>
         <br>
         <button @click="setActionMsg">Action setMsg</button>
         <br>
         <br>
         {{$store.state.user.count}}
         <br>
         <br>
         <button @click="mIncCount">改变user模块里面的数据</button>
         <hr>
         {{msgx}}-----{{countx}}
         <br>
         <br>
         <button @click="setMsgUp">执行方法改变msg</button>
         
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, computed } from 'vue'
import { mapGetters, mapState, useStore } from 'vuex'


// interface User{
//   username:string,
//   age:number,
//   setUsername(username:string):void,
//   getUsername():string
// }

export default defineComponent({
    setup(){
        // 实现接口的第一种写法
        // let user:User = reactive({
        //     username:'zhangsan',
        //     age:20,
        //     setUsername(username:string){
        //         this.username = username
        //     },
        //     getUsername(){
        //         return this.username
        //     }
        // })
        // 实现接口的第二种写法
        //  let user = reactive<User>({
        //     username:'zhangsan',
        //     age:20,
        //     setUsername(username:string){
        //         this.username = username
        //     },
        //     getUsername(){
        //         return this.username
        //     }
        // })
         // 实现接口的第三种写法
         let user = reactive({
            username:'zhangsan',
            age:20,
            setUsername(username:string){
                this.username = username
            },
            getUsername(){
                return this.username
            }
        })

        let count = ref("20") 
        // let num:string = ref("20")  //错误写法

        let reverseUsername = computed(()=>{
            return user.username.split("").reverse().join()
        })
        const store = useStore();
        
        return {
        ...toRefs(user),
        count,
        reverseUsername,
        msgx:computed(()=>{
            return store.state.msg
        }),
        countx:computed(()=>{
            return store.state.count
        }),
        setMsgUp:():void=>{
            store.commit("setMsg",'组合式api改变后的数据')
        }
    }
    },
    computed:{
        ...mapState(['count','list']),
        ...mapGetters(['reverseMsg','num'])
        // ...mapGetters({
        //     reverseMsg:"reverseMsg",
        //     num:"num"
        // })
    },
    methods:{
        incCount(){
            this.$store.commit('incCount')
        },
        setCount(){
            this.$store.commit('setCount','99')
        },
        setMsg(){
            this.$store.commit("setMsg",'我是改变后的msg')
        },
        setActionMsg(){
            this.$store.dispatch("setMsg",'改变后的数据---action')
        },
        mIncCount(){
            this.$store.commit('userIncCount')
        }
    }
    
})
</script>
<style lang="scss">
// npm install -d sass-loader node-sass

</style>
